<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta charset="UTF-8">
    <title>登录页</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        .inputdiv{
            display:flex;border: 1px solid #D2D2D2!important;background-color: #fff;height: 38px;line-height: 38px;padding: 0px 19px;
            border-radius: 19px;
        }
        .layui-input {
            border-style: none;
        }
    </style>
</head>
<body style="background: url(layui/images/img/bg.jpg);background-size:100%">
<div class="layui-main" style="margin-top: 200px">
    <div class="layui-row">
        <div class="layui-col-md4 layui-col-md-offset4">
            <form class="layui-form" th:action="@{/loginChecked}" method="post">
                <div class="layui-form-item" style="margin-bottom: 30px">
                    <div style="text-align: center;font-size: 20px;color: dimgrey">
                        <h2>Login</h2>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="inputdiv">
                        <i class="layui-icon layui-icon-username"></i>
                        <input type="text" name="userName" lay-verify="title" autocomplete="off" placeholder="用户名" class="layui-input" style="text-align: center;background-color: #f3fdff">
                    </div>
                </div>
                <div class="layui-form-item" style="margin-bottom: 30px">
                    <div class="inputdiv">
                        <i class="layui-icon layui-icon-password"></i>
                        <input type="text" name="userPassWord" lay-verify="title" autocomplete="off" placeholder="密码" class="layui-input" style="text-align: center;background-color: #f3fdff">
                    </div>
                </div>
                <div class="layui-form-item" style="text-align: center">
                    <button class="layui-btn layui-btn-radius" lay-submit style="background-color: seagreen;margin-left: 10px">IN</button>
                </div>
            </form>
        </div>
        <div class="layui-col-xs5 layui-col-xs-offset7">
            <a th:href="@{/register}" style="color:dimgrey ">注册账号</a>
        </div>
    </div>
</div>
<input type="hidden" id="message" th:value="${message}" th:unless="${#lists.isEmpty(message)}">
<script  src="layui/layui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form'], function(){
        var layer = layui.layer,form = layui.form;
        if ($('#message').val()!=null){
            var message = $('#message').val();
            /*layer.open({
                title:'错误信息'
                ,content: message
                ,time:2000
                ,closeBtn:2
                ,shade:0.1
            });*/
            layer.msg(message);
        }
    });
</script>
</body>
</html>